<template>
	<view class="container page-list">
		<view class="page-list-container">
			<!-- #ifdef APP-PLUS -->
			<view class="top_view"></view>
			<!-- #endif -->
			<view class="app-header fixed-top">
				<view class="iconfont iconfanhui" @tap="handleGoBack"></view>
				<text class="app-title">精选店铺</text>
				<view class="module-filter" @tap="handleToSearch">
					<text class="iconfont iconsousuo"></text>
					搜索附近的商家商品
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="module-product">
				<view
					class="module-list"
					v-for="(store, storeIndex) in moduleList"
					:key="storeIndex"
				>
					<view class="module-shop">
						<image :src="storeImg" class="shop-logo"></image>
						<view class="shop-content">
							<view class="shop-name">{{ store.shop }}</view>
							<view class="shop-tips">月售999+</view>
							<view class="shop-tips">基础运费￥9</view>
						</view>
					</view>
					<view class="shop-product">
						<navigator
							class="media"
							v-for="(item, index) in store.product"
							:key="index"
							:url="'../details/index?id=' + item.id"
						>
							<image class="media-object" mode="widthFix"></image>
							<view class="media-content">
								<view class="media-title">{{ item.title }}</view>
								<view class="media-price">￥{{ item.price }}</view>
							</view>
						</navigator>
					</view>
				</view>

				<!-- 上拉加载组件 -->
				<uniLoadMore :status="loadStatus"></uniLoadMore>
				<!-- 上拉加载组件 -->
			</view>

			<!-- 商品列表 -->
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore,
	},
	data() {
		return {
			storeImg: '../../../static/img/img_store.png',
			loadStatus: 'more',
			moduleList: [
				{
					shop: '广州沃尔玛商圈',
					product: [
						{
							id: 1,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 2,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 3,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 4,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
					],
				},
				{
					shop: '阿华水果铺',
					product: [
						{
							id: 1,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 2,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 3,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 4,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
					],
				},
				{
					shop: '阿华水果铺',
					product: [
						{
							id: 1,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 2,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 3,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 4,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
					],
				},
				{
					shop: '阿华水果铺',
					product: [
						{
							id: 1,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 2,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 3,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 4,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
					],
				},
				{
					shop: '阿华水果铺',
					product: [
						{
							id: 1,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 2,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 3,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 4,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
					],
				},
				{
					shop: '阿华水果铺',
					product: [
						{
							id: 1,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 2,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 3,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
						{
							id: 4,
							title: '新鲜三文鱼',
							tips: '日本原生态进口三文鱼',
							price: '200',
						},
					],
				},
			],
		};
	},
	onLoad() {},
	methods: {
		handleGoBack: function () {
			this.goBack();
		},
		// 跳转搜索页面
		handleToSearch() {
			uni.navigateTo({
				url: '../search/index',
			});
		},
	},

	onPullDownRefresh: function () {
		this.curPage = 1;
	},
	onReachBottom: function () {
		this.loadStatus = 'loading';
		// 监听用户上拉触底事件
		if (this.resData.length >= this.total || this.total === 0) {
			this.loadStatus = 'noMore';
			return false;
		}
		// 下拉加载数据
		this.curPage += 1;
	},
};
</script>

<style lang="scss">
.page-list {
	background: #f5f5f5;
}
/*  #ifdef  APP-PLUS  */
@include mobileStatusBar($uni-color-main);
.page-list {
	padding: var(--status-bar-height) 0 0;
}
/*  #endif  */

.page-list-container {
	padding: 104rpx 0 0;
	overflow: hidden;
	.app-header {
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		background: #fff;
		display: flex;
		align-items: center;
		padding: 16rpx $uni-spacing-base 16rpx 12rpx;
		color: $uni-color-main;
		.iconerweima {
			font-size: 44rpx;
			line-height: 60rpx;
			padding-right: $uni-spacing-base;
		}
	}
	.app-title {
		font-size: $uni-font-size-base;
		color: #333;
		padding-right: 16rpx;
	}
	.iconfanhui {
		padding-right: 8rpx;
		font-size: 34rpx;
		color: #333;
	}
}
.module-filter {
	background: #f2f2f2;
	padding: 2rpx 16rpx;
	flex: 1;
	border-radius: 20px;
	color: $uni-text-color-grey;
	font-size: 26rpx;
	line-height: 60rpx;
	.iconsousuo {
		margin-right: 10rpx;
		font-size: 28rpx;
	}
}
.module-product {
	background: #fff;
	.module-header {
		padding: 0 $uni-spacing-row-sm;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.shop-product {
		display: flex;
		overflow: auto;
		margin-left: 150rpx;
		padding-right: $uni-spacing-sm;
	}
	.media {
		width: 25%;
		padding: 0 $uni-spacing-sm $uni-spacing-base;
		@include borderCreator(bottom, solid, $uni-border-color-grey);
	}

	.media-object {
		background: #ccc;
		width: 100%;
		height: 120rpx;
	}
	.media-content {
		flex: 1;
		text-align: center;
	}
	.media-title {
		margin: 0 0 8rpx;
		@include textEllipsis(1);
		font-size: $uni-font-size-sm;
	}

	.media-price {
		color: $uni-text-price;
		font-size: $uni-font-size-sm;
	}
}

.module-shop {
	background: #fff;
	display: flex;
	width: 100%;
	padding: $uni-spacing-sm $uni-spacing-base 0;
	.shop-logo {
		width: 110rpx;
		height: 110rpx;
		margin-top: 16rpx;
		border-radius: $uni-border-radius-circle;
	}
	.shop-content {
		flex: 1;
		position: relative;
		padding: $uni-spacing-sm 0 $uni-spacing-sm $uni-spacing-base;
		color: $uni-text-color-grey;
	}

	.shop-name {
		margin: 0 0 10rpx;
		color: #000;
		font-size: $uni-font-size-lg;
	}
	.shop-tips {
		margin: 0 0 6rpx;
		font-size: $uni-font-size-sm;
	}
}
</style>
